<template>
  <el-dialog
    :title="title"
    center
    :visible.sync="openState"
    width="1024px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="140px">
      <!-- 基本信息 -->
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>基本信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="业务类型" prop="drct">
              <el-select v-model="formData.businessType" disabled>
                <el-option label="A200-行间资金汇划" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务种类" prop="businessKInd">
              <el-select v-model="formData.businessKInd" disabled>
                <el-option label="05023" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人账号" prop="payeeAccount">
              <el-input v-model="formData.payeeAccount" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人名称" prop="payeeName">
              <el-input v-model="formData.payeeName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款行行号" prop="payeeBankNum">
              <el-input v-model="formData.payeeBankNum" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款行行名" prop="payeeBankName">
              <el-input v-model="formData.payeeBankName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="付款开户行行行号" prop="payeeOpenBankNum">
              <el-input v-model="formData.payerOpenBankNum" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款开户行行行名" prop="payeeOpenBankName">
              <el-input v-model="formData.payerOpenBankName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人账号" prop="payerAccount">
              <el-input v-model="formData.payerAccount" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人名称" prop="payerName">
              <el-input v-model="formData.payerName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款行行号" prop="payerBankNum">
              <el-input v-model="formData.payerBankNum" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款行行名" prop="payerBankName">
              <el-input v-model="formData.payerBankName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="收款开户行行行号" prop="payerOpenBankNum">
              <el-input v-model="formData.payerOpenBankNum" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款开户行行行名" prop="payerOpenBankName">
              <el-input v-model="formData.payerOpenBankName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>补录信息</span>
        </div>

        <el-row style="margin-bottom: 10px;">
          <el-radio v-model="radio" border disabled label="1"><span>付款</span></el-radio>
          <el-radio v-model="radio" border disabled label="2"><span class="payerCount">拒绝</span></el-radio>
        </el-row>

        <el-row v-if="radio == '1'">
          <el-col :span="12">
            <el-form-item label="付款人身份" prop="payerIdentity">
              <el-select v-model="formData.payerIdentity" disabled placeholder="">
                <el-option label="居民" value="1"></el-option>
                <el-option label="非居民" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人性质" prop="payerNature">
              <el-select v-model="formData.payerNature" disabled placeholder="">
                <el-option label="单位" value="1"></el-option>
                <el-option label="个人" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="radio == '1'">
          <el-col :span="12">
            <el-form-item label="货物贸易交易" prop="goodsTradeTrans">
              <el-select v-model="formData.goodsTradeTrans" disabled placeholder="">
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="radio == '2'">
          <el-col :span="8">
            <el-form-item label="业务拒绝码" prop="businessRejectCode">
              <el-input v-model="formData.businessRejectCode" disabled placeholder="" />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="业务拒绝原因" label-width="110px" prop="businessRejectReason">
              <el-input v-model="formData.businessRejectReason" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="附言" prop="checkMemo">
              <el-input type="textarea" v-model="formData.checkMemo" disabled placeholder="" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="radio == '1'">
          <el-col :span="12">
            <el-form-item label="记账账号" prop="accountNum">
              <el-input v-model="formData.accountNum" placeholder="请输入记账账号" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="记账名称" prop="accountName">
              <el-input v-model="formData.accountName" :disabled="true" placeholder="根据记账账号反显" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="驳回原因" prop="rejectReason">
              <el-input type="textarea" v-model="formData.rejectReason" placeholder="请输入驳回原因" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>

    <el-row v-if="radio != ''" slot="footer">
      <el-col :span="2" :offset="8">
        <el-button type="primary" @click="paySuccess">同意</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="danger" @click="reject">驳回</el-button>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button @click="close">关闭</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: "collectPaymentHandelCheckDetailDialog",
  data() {
    return {
      title: "",
      radio: "2",
      buttonFlag:false,
      openState: false, // 是否显示弹出层
      form: {},
      formData: {
        businessType: "1", // 业务类型
        businessKInd: "1", // 业务种类

        payerAccount: "4392258396970031", // 付款人账号
        payerName: "付款人A", // 付款人名称
        payerBankNum: "30929000001299", // 付款行行号
        payerBankName: "兴业银行北京分行*590", // 付款行行名
        payerOpenBankNum: "30929000001299", // 付款开户行行行号
        payerOpenBankName: "兴业银行北京分行*590", // 付款开户行行行名

        payeeAccount: "4392258396970031", // 收款人账号
        payeeName: "付款人A", // 收款人名称
        payeeBankNum: "30929000001299", // 收款行行号
        payeeBankName: "兴业银行北京分行*590", // 收款行行名
        payeeOpenBankNum: "30929000001299", // 收款开户行行行号
        payeeOpenBankName: "兴业银行北京分行*590", // 收款开户行行行名

        accountNum: "", // 记账账号
        accountName: "", // 记账名称
        accountNameLogin: "1", // 账名登录

        // BOP信息
        payerIdentity: "1", // 付款人身份
        payerNature: "1", // 付款人性质
        goodsTradeTrans: "1", // 货物贸易交易

        businessRejectCode: "AW-009", // 拒绝码
        businessRejectReason: "不通过", // 拒绝原因
        checkMemo: "附言", // 附言
        rejectReason: "", // 驳回原因
      },
      rules: {
        payerIdentity: [{ required: true, message: "请选择付款人身份", trigger: "blur" }],
        payerNature: [{ required: true, message: "请选择付款人性质", trigger: "blur" }],
        goodsTradeTrans: [{ required: true, message: "请选择是否货物贸易交易", trigger: "blur" }],
      },
    };
  },

  methods: {
    handleClose() {
      this.openState = false;
    },

    show() {
      this.title = "小额批量代收业务付款单笔处理复核明细";
      this.openState = true;
    },

    // 拒绝
    reject() {
      console.log("拒绝");
    },

    // 付款
    paySuccess() {
      console.log("付款");
    },

    // 关闭
    close() {
      console.log("关闭");
      this.openState = false;
    },
  },
};
</script>

<style scoped lang="scss">
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000000 !important;
}
.menu-tool-btn {
  width: 24px;
  height: 24px;
}

.menu-tree {
  height: 5%;
  margin-top: -5px;
  margin-left: 92%;
  font-size: 28px;
}
.block {
  float: right;
  margin-top: 10px;
}

.payerCount{
  color: black;
  font-weight: 800;
}
</style>
